<template>
  <div class="news-container">
    <div class="news-list">
      <h2>News</h2>
      <ul>
        <li v-for="news in newsList" :key="news.id">
          <button @click="showNewsDetail(news)">查看新闻</button>
          <RouterLink :to="{
          // params 参数 使用对象形式传递时，不能使用 path，只能使用 name
          // params 参数不能传数组和对象
          name: 'detail',
          params: {
            id: news.id,
            title: news.title,
            content: news.content
          }
        }" href="#">{{ news.title }}</RouterLink>
        </li>
      </ul>
    </div>
    <div class="news-content">
      <!-- 这里放置新闻内容 -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterView, RouterLink, useRouter } from 'vue-router'

const newsList = reactive([
  { id: '001', title: '西工大风采', content: '无' },
  { id: '002', title: '什么是最好的篮下技术？', content: '翻身跳投' },
  { id: '003', title: '学挖掘机哪家强？', content: '中国山东找蓝翔' },
  { id: '001', title: '西工大风采', content: '无' },

]);

const router = useRouter()

interface NewsInter {
  id: string,
  title: string,
  content: string
}

function showNewsDetail(news: NewsInter) {
  // push 参数可以是 path 字符串，也可以是对象，形式和 routerlink 的 to 属性完全一致
  router.push({
    name: 'detail',
    params: {
      id: news.id,
      title: news.title,
      content: news.content
    }
  })
  // replace 的参数同理
  // router.replace({
  //   name: 'detail',
  //   params: {
  //     id: news.id,
  //     title: news.title,
  //     content: news.content
  //   }
  // })
}

</script>

<style scoped>
.news-container {
  display: flex;
  /* min-height: 100%; */
  border: 1px pink solid;
  box-sizing: border-box;
  padding: 5px;
}

.news-list {
  width: 25%;
  /* 左侧占据 25% 的宽度 */
  border: 2px green solid;

}

.news-list ul {
  padding-inline-start: 0;
}

.news-list li {
  list-style: none;
}

.news-list a {
  text-decoration: none;
  color: black;
}

.news-list a.active {
  color: royalblue;
}

.news-list a:hover {
  color: royalblue;
}

.news-content {
  width: 75%;
  /* 右侧占据 75% 的宽度 */
  min-height: 100%;
  /* background-color: slategrey; */
  box-sizing: border-box;
  border: 1px solid gold;
}
</style>